<!-- src/pages/course/checkin-management.vue -->
<template>
  <view class="checkin-container">
    <view class="header">
      <view class="header-info">
        <text class="title">签到管理</text>
        <text class="subtitle" v-if="CheckIn.currentSchedule && CheckIn.currentSchedule.value">
          课堂: {{ CheckIn.currentSchedule.value.name }}
        </text>
        <text class="subtitle" v-else-if="CheckIn.currentSchedule && CheckIn.currentSchedule.name">
          课堂: {{ CheckIn.currentSchedule.name }}
        </text>
      </view>
      <view class="header-buttons">
        <u-button type="primary" @click="CheckIn.handleAdd" icon="plus">添加签到</u-button>
        <u-button type="default" @click="goBack" icon="arrow-left">返回</u-button>
      </view>
    </view>

    <view class="content">
      <u-search 
        placeholder="搜索签到..." 
        v-model="CheckIn.searchKeyword.value" 
        @search="CheckIn.handleSearch"
      ></u-search>

      <u-list class="checkin-list">
        <u-list-item v-for="(checkInItem, index) in CheckIn.filteredModels.value" :key="index">
          <view class="checkin-item">
            <view class="checkin-info">
              <text class="checkin-name">{{ checkInItem.name }}</text>
              <text class="checkin-desc" v-if="checkInItem.desc">{{ checkInItem.desc }}</text>
              <view class="checkin-meta">
                <text class="checkin-time">截止: {{ formatDateTime(checkInItem.endTime) }}</text>
                <text class="checkin-radius">{{ checkInItem.radius }}米</text>
              </view>
              <!-- 添加创建者信息显示 -->
              <text class="checkin-creator" v-if="checkInItem.creater">
                创建老师: {{ checkInItem.creater.realname || checkInItem.creater.username || '未知' }}
              </text>
            </view>
            <view class="actions">
              <u-icon 
                name="more-dot-fill" 
                size="24" 
                @click="() => openMenu(checkInItem)"
              ></u-icon>
            </view>
          </view>
        </u-list-item>
      </u-list>
      
      <view v-if="!CheckIn.modelList.value || CheckIn.modelList.value.length === 0" class="empty-state">
        <u-empty mode="list" text="暂无签到数据"></u-empty>
      </view>
    </view>

    <!-- 签到模态框 -->
    <CheckinModal />

    <!-- 操作菜单 -->
    <u-action-sheet 
      :show="CheckIn.showMenu.value" 
      :actions="menuActions" 
      @close="CheckIn.closeMenu()"
      @select="handleMenuSelect"
    ></u-action-sheet>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import "jbecool/jbecool.uniapp.min.js"
import "@/js/common.js";
import CheckIn from "@/js/admin/checkin.js";
import CheckinModal from '@/components/admin/checkin-modal.vue';

// 菜单相关数据
const menuActions = ref([
  { name: '查看详情', value: 'detail' },
  { name: '编辑', value: 'edit' },
  { name: '删除', value: 'delete' }
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 打开菜单
const openMenu = (checkInItem) => {
  CheckIn.openMenuModel(checkInItem);
};

// 处理菜单选择
const handleMenuSelect = (action) => {
  CheckIn.closeMenu();
  if (action.value === 'edit') {
    CheckIn.handleEdit(CheckIn.currentModel);
  } else if (action.value === 'delete') {
    CheckIn.handleDelete(CheckIn.currentModel);
  } else if (action.value === 'detail') {
    // 跳转到签到详情页面
    uni.navigateTo({
      url: `/pages/course/checkin-detail?checkInId=${CheckIn.currentModel.checkInId}`
    });
  }
};

// 获取URL参数
const getUrlParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  return options;
};

// 加载数据
const loadData = async () => {
  const params = getUrlParams();
  const scheduleId = params.scheduleId;
  
  if (scheduleId) {
     await CheckIn.loadCheckIns(parseInt(scheduleId));
  } else {
    uni.showToast({ title: '缺少课堂ID参数', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
};

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 页面显示时刷新数据
const onShow = () => {
  loadData();
};

// 页面加载时获取数据
onMounted(async () => {
  await loadData();
  uni.$on('refreshCheckInPage', onShow);
});

// 页面卸载时清理
onUnmounted(() => {
  uni.$off('refreshCheckInPage', onShow);
});
</script>

<style scoped>
.checkin-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 10px;
}

.header-info {
  flex: 1;
}

.title {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  display: block;
}

.header-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.checkin-list {
  margin-top: 15px;
}

.checkin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.checkin-item:last-child {
  border-bottom: none;
}

.checkin-info {
  flex: 1;
  margin-right: 10px;
}

.checkin-name {
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}

.checkin-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.checkin-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
}

.checkin-creator {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}
</style>